<!--
 * @LastEditTime : 2022-10-31 15:21:03
 * @FilePath     : /pyy/src/views/instandhaltung/add/index.vue
 * @Description  : 设备维修 > 申请设备维修
-->
<template>
  <div id="instandhaltung-add">
    <van-nav-bar title="申请设备维修" left-arrow @click-left="goBack" />

    <div class="contaniner">
      <van-form
        label-width="180px"
        input-align="right"
        error-message-align="right"
        scroll-to-error
        validate-trigger="onChange"
        @submit="handleSubmit"
      >
        <div class="form-group">
          <van-field
          class="mandatory"
            name="consignorW"
            label="委托人"
            :rules="[{ required: true, message: '不能为空' }]"
            placeholder="请填写"
            autocomplete="off"
            v-model="form.consignorW"
          />
          <van-field
            autosize
            rows="1"
            class="mandatory"
            type="textarea"
            name="principalUnit"
            label="委托人单位"
            :rules="[{ required: true, message: '不能为空' }]"
            label-width="max-content"
            placeholder="请填写"
            autocomplete="off"
            v-model="form.principalUnit"
          />
          <van-field
            name="consignorPhone"
            label="委托人电话"

            placeholder="请填写电话号码"
            autocomplete="off"
            class="mandatory"
            :rules="[
              {
                validator: (val) =>
                  val
                    ? /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/.test(
                        val
                      )
                    : true,
                message: '请输入正确的电话号码',
              },
              { required: true, message: '不能为空' }
            ]"
            v-model="form.consignorPhone"
          />
          <van-field
            autosize
            rows="1"
            type="textarea"
            name="deviceName"
            label="设备名称"
            :rules="[{ required: true, message: '不能为空' }]"
            placeholder="请填写"
            class="mandatory"
            autocomplete="off"
            v-model="form.deviceName"
          />
          <van-field
            name="code"
            label="出产编号"
            :rules="[{ required: true, message: '不能为空' }]"
            placeholder="请填写"
            class="mandatory"
            autocomplete="off"
            v-model="form.code"
          />
          <van-field  name="theManufacturer" label="生产厂家" v-model="form.manufacturer" />
          <van-field name="specifications" label="型号规格" v-model="form.model" />
          <popup-select
            name="way"
            label="维修方式"
            placeholder="请选择"
            :options="relationData.modeOptions"
            class="mandatory2"
            :rules="[{ required: true, message: '不能为空' }]"
            :default-props="{
              label: 'name',
              value: 'id',
            }"
            v-model="form.way"
          />
          <popup-select
            name="add"
            label="维修地点"
            class="mandatory2"
            placeholder="请选择"
            :rules="[{ required: true, message: '不能为空' }]"
            :options="relationData.placeOptions"
            :default-props="{
              label: 'name',
              value: 'id',
            }"
            v-model="form.add"
          />
          <calendar
            name="entrustDate"
            label="设备维修委托时间"
            placeholder="请选择日期"
            v-model="form.entrustDate"
          />
          <calendar
            name="okDate"
            label="要求完成时间"
            placeholder="请选择日期"
            v-model="form.okDate"
          />
          <uploader
            name="file"
            label="附件"
            placeholder="点击上传附件"
            v-model="form.attachment"
          />
          <van-field
            autosize
            rows="1"
            type="textarea"
            class="describe mandatory"
            name="describe"
            label="故障描述"
            label-width="100%"
            input-align="left"
            :rules="[{ required: true, message: '不能为空' }]"
            placeholder="请输入故障描述内容"
            autocomplete="off"
            v-model="form.describe"
          />
        </div>
        <div class="btn-groups">
          <van-button
            class="btn-submit"
            round
            block
            type="info"
            native-type="submit"
          >
            提交
          </van-button>
        </div>
      </van-form>
    </div>
  </div>
</template>

<script>
import { Toast } from "vant";
import Uploader from "./components/uploader.vue";
import api from "@/http/api";

export default {
  name: "InstandhaltungAdd",
  components: {
    Uploader,
  },
  data() {
    return {
      relationData: {
        // 维修方式
        modeOptions: [],
        // 维修地点
        placeOptions: [],
      },

      form: {
        consignorW: "",
        principalUnit: "",
        consignorPhone: "",
        deviceName: "",
        code: "",
        way: "",
        add: "",
        entrustDate: "",
        okDate: "",
        attachment: [],
        describe: "",
      },
    };
  },
  created() {
    this.initRelationData();
  },
  mounted() {

  },
  methods: {
    /**
     * 返回
     */
    goBack() {
      this.$router.replace("/instandhaltung");
    },

    /**
     * 初始化 关联数据
     */
    initRelationData() {
      const toast = Toast.loading({
        duration: 0,
        forbidClick: true,
      });
      api.instandhaltung
        .getEnum()
        .then((res) => {
          const { code, data, msg } = res.data || {};
          if (code !== 200) return Toast.fail(msg);

          this.relationData.modeOptions = data["维修方式"] || [];
          this.relationData.placeOptions = data["设备维修地点"] || [];
        })
        .finally(() => {
          setTimeout(toast.clear, 500);
        });
    },

    /**
     * 点击 提交
     */
    async handleSubmit() {
      const toast = Toast.loading({
        duration: 0,
        forbidClick: true,
      });

      const { attachment = [] } = this.form || {};
      let uploadFileList = [];

      if (attachment.length) {
        const formData = new FormData();
        attachment.forEach((item) => {
          formData.append("file", item.file);
        });

        uploadFileList = await api.file
          .upload(formData)
          .then((res) => {
            const { code, data = [], msg } = res.data || {};
            if (code !== 200) {
              Toast.fail(msg || "文件上传失败");
              return [];
            }
            return data;
          })
          .catch(() => []);
      }
      if (attachment.length != uploadFileList.length) return toast.clear();
      if(this.getDate() === this.getCurrentMonthLastDay(new Date())){
        Toast.fail("月末最后四天内，不能提交");
      }else if(this.getDate() === this.getCurrentMonthLastDay2(new Date())){
        Toast.fail("月末最后四天内，不能提交");
      }else if(this.getDate() === this.getCurrentMonthLastDay3(new Date())){
        Toast.fail("月末最后四天内，不能提交");
      }else if(this.getDate() === this.getCurrentMonthLastDay4(new Date())){
        Toast.fail("月末最后四天内，不能提交");
      }else{
        api.instandhaltung
        .addInformation({ ...this.form, attachment: uploadFileList })
        .then((res) => {
          const { code, msg } = res.data || {};
          if (code !== 200) return Toast.fail(msg);
          Toast.success("发起成功");
          setTimeout(this.goBack, 1000);
        })
        .finally(() => {
          setTimeout(toast.clear, 500);
        });
      }

    },
    getDate(){
    var myDate = new Date();	//创建Date对象
    var Y = myDate.getFullYear();   //获取当前完整年份
    var M = myDate.getMonth() + 1;  //获取当前月份
    var D = myDate.getDate();   //获取当前日1-31
    var H = myDate.getHours();  //获取当前小时
    var i = myDate.getMinutes();    //获取当前分钟
    var s = myDate.getSeconds();    //获取当前秒数
    // 月份不足10补0
    if(M < 10){
        M = '0' + M;
    }
    // 日不足10补0
    if(D < 10){
        D = '0' + D;
    }
    // 小时不足10补0
    if(H < 10){
        H = '0' + H;
    }
    // 分钟不足10补0
    if(i < 10){
        i = '0' + i;
    }
    // 秒数不足10补0
    if(s < 10){
        s = '0' +s;
    }
    // 拼接日期分隔符根据自己的需要来修改
    var nowDate = Y+'-'+M+'-'+ D
    return nowDate

    },
    // 获取当月最后一天
    getCurrentMonthLastDay() {
      let date = new Date();
      let currentMonth = date.getMonth();
      let nextMonth = ++currentMonth;
      let nextMonthFirstDay = new Date(date.getFullYear(), nextMonth, 1);
      let oneDay = 1000 * 60 * 60 * 24;
      let lastTime = new Date(nextMonthFirstDay - oneDay);
      let month = parseInt(lastTime.getMonth() + 1);
      let day = lastTime.getDate();
      if (month < 10) {
        month = "0" + month;
      }
      if (day < 10) {
        day = "0" + day;
      }
      return date.getFullYear() + "-" + month + "-" + day;
    },
    // 获取当月到数第二天
    getCurrentMonthLastDay2() {
      let date = new Date();
      let currentMonth = date.getMonth();
      let nextMonth = ++currentMonth;
      let nextMonthFirstDay = new Date(date.getFullYear(), nextMonth, 1);
      let oneDay = 1000 * 60 * 60 * 24;
      let lastTime = new Date(nextMonthFirstDay - oneDay);
      let month = parseInt(lastTime.getMonth() + 1);
      let day = lastTime.getDate();
      if (month < 10) {
        month = "0" + month;
      }
      if (day < 10) {
        day = "0" + day;
      }
      return date.getFullYear() + "-" + month + "-" + (day * 1 - 1);
    },
    // 获取当月到数第3天
    getCurrentMonthLastDay3() {
      let date = new Date();
      let currentMonth = date.getMonth();
      let nextMonth = ++currentMonth;
      let nextMonthFirstDay = new Date(date.getFullYear(), nextMonth, 1);
      let oneDay = 1000 * 60 * 60 * 24;
      let lastTime = new Date(nextMonthFirstDay - oneDay);
      let month = parseInt(lastTime.getMonth() + 1);
      let day = lastTime.getDate();
      if (month < 10) {
        month = "0" + month;
      }
      if (day < 10) {
        day = "0" + day;
      }
      return date.getFullYear() + "-" + month + "-" + (day * 1 - 2);
    },
    //获取当月到数第4天
    getCurrentMonthLastDay4() {
      let date = new Date();
      let currentMonth = date.getMonth();
      let nextMonth = ++currentMonth;
      let nextMonthFirstDay = new Date(date.getFullYear(), nextMonth, 1);
      let oneDay = 1000 * 60 * 60 * 24;
      let lastTime = new Date(nextMonthFirstDay - oneDay);
      let month = parseInt(lastTime.getMonth() + 1);
      let day = lastTime.getDate();
      if (month < 10) {
        month = "0" + month;
      }
      if (day < 10) {
        day = "0" + day;
      }
      return date.getFullYear() + "-" + month + "-" + (day * 1 - 3);
    },
  },
};
</script>

<style lang="less" scoped>
#instandhaltung-add {
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
  background: #ffffff;

  /deep/ .van-nav-bar {
    .van-nav-bar__left {
      padding-left: 10px;
    }

    .van-nav-bar__title {
      font-family: "Inter";
      font-style: normal;
      font-weight: 600;
      font-size: 18px;
      line-height: 20px;
      text-align: center;
      letter-spacing: -0.24px;
      color: #333333;
    }

    .van-nav-bar__content {
      .van-nav-bar__left {
        i {
          font-size: 20px;
          color: #999999;
        }
      }
    }
  }

  .contaniner {
    width: 100%;
    height: 0;
    flex: 1;
    overflow-y: auto;

    /deep/ .van-form {
      .form-group {
        box-sizing: border-box;
        padding: 0 12px;
        background: #ffffff;
      }
      .mandatory{
            position: relative;
            &::after{
                content: '*';
                display: block;
                position: absolute;
                left: 5px;
                top: 14px;
                font-size: 16px;
                color: red;
                transform: scale(1);

            }
        }
        .mandatory2{
            position: relative;
            &::after{
                content: '*';
                display: block;
                position: absolute;
                left: 5px;
                top: 20px;
                font-size: 16px;
                color: red;
                transform: scale(1);

            }
        }
      .van-field {
        font-family: "Inter";
        font-style: normal;
        font-weight: 400;
        font-size: 16px;
        line-height: 24px;
        color: #666666;
        padding: 12px 4px;
        padding-left: 15px !important;
        border-bottom: 1px solid #e8e8e8;

        .van-field__label {
          span {
            white-space: nowrap;
          }
        }

        .van-field__value {
          .van-field__body {
            .van-field__control {
              .van-radio-group {
                width: 80%;

                .van-row {
                  width: 100%;

                  .van-radio {
                    margin: 0;
                  }
                }
              }
            }
          }
        }
      }

      // 故障描述
      .van-field.describe {
        flex-direction: column;
        border: none;

        .van-field__value {
          flex: none;
          width: 100%;
          min-height: 108px;
          background: #f8f8f8;
          box-sizing: border-box;
          padding: 8px 12px;
          margin-top: 6px;
          font-size: 14px;
        }
      }

      .btn-add-detailed {
        font-family: "ABeeZee";
        font-style: normal;
        font-weight: 400;
        font-size: 16px;
        line-height: 20px;
        text-align: center;
        letter-spacing: -0.24px;
        color: #0e86d1;
        border: none;
      }
    }

    .btn-groups {
      width: 100%;
      box-sizing: border-box;
      padding: 8px 14px 12px;

      .btn-submit {
        background: #0e86d1;
        border-radius: 4px;
        font-family: "Inter";
        font-style: normal;
        font-weight: 400;
        font-size: 16px;
        line-height: 19px;
        color: #ffffff;
      }
    }
  }
}
</style>
